<template>
  <div>
    <!-- 面包屑 -->
    <mbx name1="数据统计" name2="数据报表" />
    <el-card class="mt16">
      <div id="main" :style="{ width: '100%', height: '420px' }"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  async mounted() {
    const res = await this.$API.gettb()
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(document.getElementById('main'))
    const re = res
    const options = {
      title: {
        text: '用户来源'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#E9EEF3'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    }
    const ress = { ...re, ...options }
    // 绘制图表
    myChart.setOption(ress)

    // 自适应
    window.addEventListener('resize', myChart.resize)
  },
  methods: {}
}
</script>

<style scoped></style>
